<template>
  <div class="div">
    <el-card>
      <!-- 搜索区 -->
      <el-row :gutter="20">
        <el-col :span="11">
          <el-date-picker
            v-model="value2"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 150px"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <el-button
            type="danger"
            icon="el-icon-search"
            circle
            @click="getListByDate()"
            style="margin-left: 30px"
          ></el-button>
        </el-col>
      </el-row>

      <div></div>

      <!-- 表格 -->
      <el-table :data="roomList2" :row-class-name="tableRowClassName" border>
        <el-table-column
          prop="roomNo"
          label="RoomNo"
          width="89"
        ></el-table-column>
        <el-table-column label="8:00" width="80">
          <template #default="{ row }">
            <span>{{ istrue(row, 8) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="9:00" width="80">
          <template #default="{ row }">
            <span>{{ istrue(row, 9) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="10:00" width="80">
          <template #default="{ row }">
            <span>{{ istrue(row, 10) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="11:00" width="80">
          <template #default="{ row }">
            <span>{{ istrue(row, 11) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="12:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 12) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="13:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 13) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="14:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 14) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="15:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 15) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="16:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 16) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="17:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 17) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="18:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 18) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="19:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 19) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="20:00" width="89">
          <template #default="{ row }">
            <span>{{ istrue(row, 20) ? "👩‍👩‍👧‍👦👩‍👩‍👧‍👦" : "" }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :page-size="2"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      today: "",
      roomList: [
        { roomNo: 601, startTime: 9, endTime: 10 },
        { roomNo: 602, startTime: 9, endTime: 10 },
        { roomNo: 603, startTime: 9, endTime: 10 },
        { roomNo: 601, startTime: 10, endTime: 12 },
        { roomNo: 603, startTime: 12, endTime: 15 },
        { roomNo: 604, startTime: 10, endTime: 11 },
        { roomNo: 605, startTime: 12, endTime: 13 },
        { roomNo: 606, startTime: 8, endTime: 9 },
        { roomNo: 606, startTime: 10, endTime: 12 },
      ],
      // roomList2: [{ roomNo: 601, StartTimeArray: [8] }],
      roomList2: [],

      param: {
        cDate: new Date(),
        current: 1,
      },
      total: 5,
    };
  },

  methods: {
    async isShow() {
      console.log(this.roomList2.indexOf(1));
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    //按日期获取的会议室信息
   async getListByDate() {
      const date = this.value2;
      console.log(date);
      if (date == "") {
        return this.$message.warning("日期没选呢呀");
      }
      this.getListOneDay(date);
    },
    //获取当前年月日
    getToday() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      let day = new Date().getDate();
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;
      this.today = today;
    },
    // roomList ===> roomList2
    autowide() {
      //打散
      const roomL = this.roomList2;
      // const arraylen = this.rnum;
      //返回数据集-length  arraylen
      const arraylen = this.roomList.length;
      //返回数据集 roomBack
      const roomBack = this.roomList;

      const noList = [];
      let t = true;
      //装配房间
      roomBack.forEach((element) => {
        if (noList.indexOf(element.roomNo) == -1) {
          noList.push(element.roomNo);
        }
      });
      for (let i = 0; i < noList.length; i++) {
        const element = noList[i];
        roomL[i] = new Object();
        roomL[i].roomNo = noList[i];
        roomL[i].StartTimeArray = [];
        roomL[i].endTimeArray = [];
      }
      roomBack.forEach((element) => {
        roomL.forEach((element2) => {
          if (element.roomNo == element2.roomNo) {
            element2.StartTimeArray.push(element.startTime);
            element2.endTimeArray.push(element.endTime);
          }
        });
      });

      this.roomList2 = roomL;
    },
     // 查询今天所有记录
    async getTodayList() {
        //现在this.today 是今天的年月日
        let  date = this.today
        axios
        //请求接口 date为当前年月日字符串作为参数
        .post("meetingManage/findAll",date)
        //数据集赋值到数组roomList
        .then((res) => {
          let num = 0;
          for (let i of res.data.date) {
            for (let j of i.rows) {
              num++;
              this.roomList.push(j);
            }
          }
          this.rnum = num;
        })
        .then(() => {
          //将roomList 整理到 roomList2
          this.autowide();
        });
    },
    //查询某一天的数据集
     async getListOneDay(date) {
        axios
        .post("meetingManage/findAll",date)
        .then((res) => {
          let num = 0;
          for (let i of res.data.date) {
            for (let j of i.rows) {
              num++;
              this.roomList.push(j);
            }
          }
          this.rnum = num;
        })
        .then(() => {
          this.autowide();
        });
    },
    istrue(row, ags) {
      let code = false;

      for (let index = 0; index < row.StartTimeArray.length; index++) {
        if (
          row.StartTimeArray[index] == ags ||
          (row.StartTimeArray[index] <= ags && row.endTimeArray[index] >= ags)
        ) {
          code = true;
        }
      }
      return code;
    },
    /*async getList() {
      let params = this.$qs.stringify({
      });
      const { data: res } = await this.$axios.get("");
      if (res.code !== 200) return this.$message.error("对不起，失败了");
      this.roomList = res.data;
      console.log(res.data);
    },*/

    handleCurrentChange(newCurrent) {
      this.param.current = newCurrent;
      this.getList();
    },
    reverse(id) {},
  },
  created() {
    //获取今天的日期
    this.getToday();
    //输出今天的年月日 
     console.log(this.today);
    //获取今天的会议室数据集
    this.getTodayList();
    //重新装配
    this.autowide();
    console.log("---");
    console.log(this.roomList2);
    console.log("----");
  },
  mounted() {},
};
</script>

<style  scoped>
.div {
  height: 100%;
}
.el-col {
  display: flex;
}
.el-button {
  margin-left: 6px;
}
.el-table {
  border-radius: 6px;
}
.color {
  background-color: red;
}
.el-table .warning-row {
  background: rgb(238, 234, 226);
}

.el-table .success-row {
  background: #dfe9d9;
}
.color12 {
  color: #000;
}
</style>
